<template>
    <div>
      <div :id = ballId style="width:314px; height:170px; position:relative"></div>
    </div>
</template>
<script>
import chart from "./newChart";
import { Ball, CollBox } from "@/utils/collision.min.js";
import _ from "lodash";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      ballId: String(10 * Math.random()),
      noData: false,
      dataOption: {}
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.noData = false;
      if (this.value && this.value.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
        return;
      }
    }
  },
  methods: {
    setOption(res) {
      var maxRadius = 43;
      var minRadius = 33;
      var max = res[0].value; // 假定第一个就是最大值
      var min = res[0].value; // 假定第一个也是最小值
      for (var j = 1; j < res.length; j++) {
        if (res[j].value > max) {
          // 如果比最大还大,他就暂时是最大
          max = res[j].value;
        } else if (res[j].value < min) {
          // 如果比最小还小,他就暂时是最小
          min = res[j].value;
        }
      }
      var proportion = (maxRadius - minRadius) / (max - min);
      // var sizeList = [50, 40, 35, 30, 25, 22, 21, 18, 16, 15];
      var colourList = [
        "#29AAE1",
        "#7F47DC",
        "#FAAF3B",
        "#435EFF",
        "#EE3F86",
        "#22B473",
        "#F05A24",
        "pink",
        "yellow",
        "cyan"
      ];
      var oC = document.getElementById(this.ballId);
      var mxwidth = oC.offsetWidth;
      var mxheight = oC.offsetHeight;
      var oB = new CollBox(this.ballId);
      oB.ballRun();
      for (var i = 0; i < res.length; i++) {
        var b =
          (Math.abs(res[i].value) - Math.abs(min)) * proportion + minRadius;
        var x = this.rand(b, mxwidth - b);
        var y = this.rand(b, mxheight - b);
        var ball = new Ball({
          b: b,
          x: x,
          y: y,
          m: b,
          sx: this.rand(0.5, 1),
          sy: this.rand(0.5, 1),
          c: colourList[i],
          html: "<p>" + res[i].name + "</p><p>" + res[i].value + "</p>",
          fontSize: 10,
          opa: 1
          // opa: this.rand(60, 100) / 100
        });
        oB.addBall(ball);
      }
    },
    rand(m, n) {
      return m + parseInt((n - m) * Math.random());
    }
  }
};
</script>
<style>
#ballContainer {
  width: 500px;
  height: 500px;
  margin: 20px auto;
  position: relative;
}
</style>
